<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>ERAT 前端演示版</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>ERAT 实验报告统计分析工具</h1>

<!-- 学生名单管理 -->
<h2>1. 学生名单管理</h2>
<ul id="studentList"></ul>
<input id="newId" placeholder="学号">
<input id="newName" placeholder="姓名">
<input id="newMajor" placeholder="专业">
<button onclick="addStudent()">添加学生</button>

<!-- 实验报告模拟分析 -->
<h2>2. 学生维度统计</h2>
<button onclick="studentAnalysis()">学生统计</button>
<pre id="studentStat" style="background:#f9f9f9; padding:10px;"></pre>

<h2>3. 实验维度统计</h2>
<button onclick="experimentAnalysis()">实验统计</button>
<pre id="experimentStat" style="background:#f0f0f0; padding:10px;"></pre>

<h2>4. 导出统计 CSV</h2>
<button onclick="exportCSV()">导出学生缺交统计</button>

<h2>5. 提交率折线图</h2>
<button onclick="drawChart()">绘图</button>
<canvas id="chart" width="600" height="300"></canvas>

<script>
    const students = [
        { id: '202301', name: '张三', major: '软件' },
        { id: '202302', name: '李四', major: '软件' },
        { id: '202303', name: '王五', major: '软件' },
        { id: '202304', name: '赵六', major: '软件' },
        { id: '202305', name: '钱七', major: '软件' },
        { id: '202306', name: '孙八', major: '软件' },
        { id: '202307', name: '周九', major: '软件' },
        { id: '202308', name: '吴十', major: '软件' },
        { id: '202309', name: '郑十一', major: '软件' },
        { id: '202310', name: '张三1', major: '软件' }
    ];

    // 缺交情况（实验号：缺交人）
    const reportMap = {
        '实验1': ['张三', '张三2', '张三3'],
        '实验2': ['张三1', '张三3'],
        '实验3': ['张三3']
    };

    function refreshStudentList() {
        const ul = document.getElementById('studentList');
        ul.innerHTML = '';
        students.forEach((s, idx) => {
            const li = document.createElement('li');
            li.textContent = `${s.id} - ${s.name} - ${s.major}`;
            const delBtn = document.createElement('button');
            delBtn.textContent = '删除';
            delBtn.onclick = () => { students.splice(idx, 1); refreshStudentList(); };
            li.appendChild(delBtn);
            ul.appendChild(li);
        });
    }

    function addStudent() {
        const id = document.getElementById('newId').value.trim();
        const name = document.getElementById('newName').value.trim();
        const major = document.getElementById('newMajor').value.trim();
        if (id && name) {
            students.push({ id, name, major });
            refreshStudentList();
        }
    }

    function studentAnalysis() {
        // 统计每个学生缺交实验
        const result = students.map(s => {
            const missed = [];
            for (let exp in reportMap) {
                if (reportMap[exp].includes(s.name)) missed.push(exp);
            }
            return {
                id: s.id,
                name: s.name,
                count: missed.length,
                missed: missed.join('：')
            };
        });
        let output = '学号\t姓名\t缺交次数\t缺交实验列表\n';
        result.forEach(r => {
            output += `${r.id}\t${r.name}\t${r.count}\t${r.missed}\n`;
        });
        document.getElementById('studentStat').innerText = output;
    }

    function experimentAnalysis() {
        // 统计每个实验缺交学生
        let output = '实验名\t缺交人数\t缺交学生列表\n';
        for (let exp in reportMap) {
            const list = reportMap[exp];
            output += `${exp}\t${list.length}\t${list.join('：')}\n`;
        }
        document.getElementById('experimentStat').innerText = output;
    }

    function exportCSV() {
        let csv = '学号,姓名,缺交次数,缺交实验\n';
        students.forEach(s => {
            const missed = [];
            for (let exp in reportMap) {
                if (reportMap[exp].includes(s.name)) missed.push(exp);
            }
            csv += `${s.id},${s.name},${missed.length},"${missed.join(';')}"\n`;
        });

        // 重点：添加 UTF-8 BOM 防止中文乱码
        const bom = '\uFEFF';  // UTF-8 BOM
        const blob = new Blob([bom + csv], { type: 'text/csv;charset=utf-8;' });

        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '学生缺交统计.csv';
        a.click();
    }


    function drawChart() {
        const total = students.length;
        const labels = Object.keys(reportMap);
        const data = labels.map(exp => {
            const submitted = total - reportMap[exp].length;
            return submitted / total;
        });

        new Chart(document.getElementById('chart').getContext('2d'), {
            type: 'line',
            data: {
                labels,
                datasets: [{
                    label: '提交率',
                    data,
                    borderColor: 'green',
                    tension: 0.2,
                    fill: false
                }]
            },
            options: {
                scales: {
                    y: {
                        min: 0,
                        max: 1,
                        title: { display: true, text: '提交率' }
                    },
                    x: {
                        title: { display: true, text: '实验编号' }
                    }
                }
            }
        });
    }

    refreshStudentList(); // 初始化列表
</script>
</body>
</html>
